import { MapViewService } from './../../pages/gis/service/map-view.service';
import { Component, OnInit, EventEmitter, Output, Input, OnDestroy } from '@angular/core';
import { defaults as defaultControls, Attribution } from 'ol/control';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {
    MapDataService,
    EQUIPMENT_CODE,
    BASIC_LAYER_KEY,
    ACTION_LAYER_KEY,
    OVERLAY_KEY,
    MARKER_TYPE,
    FeatureType
} from './../../pages/gis/service/map-data.service';
@Component({
    selector: 'itmp-ol-map',
    templateUrl: './ol-map.component.html',
    styles: [``]
    // .angular-ol-maps-container { display:block; width:100%; height:400px; }
})
export class OlMapComponent implements OnInit, OnDestroy {
    private _map: any;
    @Input() mapSize = { width: '100%', height: '100%' };
    @Input()
    set mapOption(data: any) {
        if (data) {
            this.renderMap(data);
        }
    }

    get map(): any {
        return this._map;
    }
    @Output() ready = new EventEmitter<any>();
    constructor(private mapViewService: MapViewService) {}
    public renderMap(option: any) {
        const target = 'map';
        // const layers = [new TileLayer({ source: new OSM() })];
        const layers = [this.mapViewService.getBasicMapLayerGeo()];
        const view = new View({ center: this.mapViewService.centerCoords, zoom: 14, projection: 'EPSG:4326' });
        const controls = defaultControls({ attribution: false });
        const defaultOption = { target, controls, layers, view };
        try {
            const mapOption = { ...defaultOption, ...option };
            this._map = new Map(mapOption);
            const key = 'traffic';

            const layer = this.mapViewService.getTrafficDataLayer(true);
            this.map.set(key, layer);
            this.map.addLayer(layer);
            setTimeout(() => this.ready.emit(this._map), 1000);
        } catch (ex) {
            console.warn('地图初始化失败', ex);
        }
    }
    ngOnInit() {}

    ngOnDestroy() {
        this._map = null;
    }
}
